<template>
	<div class="content">
		<common-head :showIcon="false" :showBackButton="true"></common-head>
		<div class="container">
			<div class="parking-records">
				<div class="header">
					<div class="license-plate">{{ carInfo.licensePlate }}</div>
					<div class="history-orders">历史订单：{{ carInfo.historyOrders }}</div>
				</div>

				<div class="cumulative-debt">
					历史累计欠费金额：{{ carInfo.cumulativeDebt }}
				</div>

				<!-- 停车记录列表 -->
				<div class="record-item" v-for="(record, index) in parkingRecords" :key="index">
					<div class="record-header">泊位号：{{ record.berth }}</div>

					<div class="record-content">
						<div class="section-title">车辆信息</div>

						<div class="info-item">
							<span class="label">车牌号码：</span>
							<span class="value">{{ record.carNumber }}</span>
						</div>

						<div class="info-item">
							<span class="label">车辆类型：</span>
							<span class="value">{{ record.carType }}</span>
						</div>

						<div class="info-item">
							<span class="label">进场时间：</span>
							<span class="value">{{ record.startTime }}</span>
						</div>

						<div class="info-item">
							<span class="label">离场时间：</span>
							<span class="value">{{ record.endTime }}</span>
						</div>

						<div class="info-item">
							<span class="label">需缴费用：</span>
							<span class="value">{{ record.fees }}</span>
						</div>

						<div class="info-item">
							<span class="label">停车时间：</span>
							<span class="value">{{ record.parkingTime }}</span>
						</div>
					</div>

					<div class="record-actions">
						<button class="action-btn pay-btn" @click="collectFee(record)">费用追缴</button>
						<button class="action-btn print-btn" @click="printReceipt(record)">打印小票</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Dialog
	} from 'vant';
	import commonHead from "../../components/xc/commonHead.vue";
	export default {
		components: {
			commonHead,
			[Dialog.Component.name]: Dialog.Component
		},
		data() {
			return {
				carInfo: {
					licensePlate: "",
					historyOrders: 0,
					cumulativeDebt: ""
				},
				parkingRecords: []
			};
		},
		created() {
			this.getParkingRecords();
		},
		methods: {
			async getParkingRecords() {
				const {
					noticeId,
					car_number,
					arrears_fees
				} = this.$route.params;
				this.carInfo.licensePlate = car_number;
				this.carInfo.cumulativeDebt = arrears_fees;

				try {
					const response = await this.baseService.post(
						`/msg/noticeInfo/getArrearsInfo?noticeId=${noticeId}`);
					if (response.code === 200) {
						this.parkingRecords = response.result.records;
						this.carInfo.historyOrders = this.parkingRecords.length;
					} else {
						this.$toast("获取欠费订单信息失败");
					}
				} catch (error) {
					console.error("获取欠费订单信息失败: ", error);
					this.$toast("获取欠费订单信息失败");
				}
			},
			collectFee(record) {
				Dialog.confirm({
					title: '费用催缴',
					message: '确定要向该用户发送费用催缴通知吗？',
					confirmButtonText: '确认',
					cancelButtonText: '取消'
				}).then(async () => {
					// 用户点击确认
					try {
						const response = await this.baseService.post(
							`/parking/bizParkingOrder/orderCollection/id=${record.id}`
						);
						if (response.code === 200) {
							this.$toast.success("催缴成功");
							// 可选：刷新数据
							await this.getParkingRecords();
						} else {
							this.$toast.fail(response.msg || "催缴失败");
						}
					} catch (error) {
						console.error("费用催缴失败: ", error);
						this.$toast.fail("请求失败，请检查网络");
					}
				}).catch(() => {
					// 用户点击取消
					console.log("用户取消催缴");
				});
			},
			printReceipt(record) {
				// 打印小票逻辑
				console.log("打印小票", record);
			}
		}
	};
</script>

<style scoped>
	.content {
		height: 100vh;
	}

	.container {
		/* 		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #fff; */
		height: 100%;
		width: 100%;
		padding: 10px;
		background-image: linear-gradient(to right, #cee7ff, #a5d3ff);
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.2rem;
	}

	.license-plate {
		font-size: 0.6rem;
		font-weight: bold;
		color: #333;
		margin-top: 0.3rem;
		margin-left: 0.4rem;
	}

	.history-orders {
		font-size: 0.3rem;
		color: #666;
		margin-right: 0.4rem;
	}

	.cumulative-debt {
		font-size: 0.3rem;
		color: #666;
		margin-left: 0.4rem;
		margin-bottom: 0.2rem;
	}

	.parking-records {
		background-color: #fff;
		border-radius: 0.1rem;
		padding: 0.2rem;
	}

	.record-item {
		margin-bottom: 0.2rem;
		background-color: #dbeafe;
		border-radius: 0.1rem;
		padding: 0.2rem;
		box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.05);
	}

	.record-header {
		font-size: 0.5rem;
		color: #333;
		font-weight: bold;
		margin-bottom: 0.2rem;
		padding-bottom: 0.1rem;
		border-bottom: 0.8px solid #999;
		padding-left: 0.2rem;
	}

	.section-title {
		font-size: 0.4rem;
		font-weight: bold;
		margin-bottom: 0.15rem;
		color: #333;
		padding-left: 0.2rem;
	}

	.info-item {
		display: flex;
		margin-bottom: 0.1rem;
		font-size: 0.26rem;
		color: #666;
		padding-left: 0.2rem;
	}

	.label {
		width: 1.8rem;
		font-size: 0.35rem;
		color: #888;
	}

	.value {
		font-size: 0.35rem;
	}

	.record-actions {
		display: flex;
		justify-content: space-between;
		margin-top: 0.2rem;
	}

	.action-btn {
		flex: 1;
		height: 0.6rem;
		border: none;
		border-radius: 0.05rem;
		font-size: 14px;
		cursor: pointer;
		margin: 0 0.1rem;
	}

	.pay-btn {
		background-color: #1890ff;
		color: white;
	}

	.print-btn {
		background-color: #4caf50;
		color: white;
	}
</style>